<template>
     <el-menu
      :default-active="active"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
      >
      
      <el-menu-item 
      v-if="userinfo?userinfo.rolltype==nav.roll:userinfo" 
      v-for="(nav,i) in navList" 
      :index="nav.path"
      :key="i">
        <i :class="nav.icon"></i>
        <span slot="title">{{nav.text}}</span>
      </el-menu-item>
    </el-menu>
</template>

<script>

var navList = [
  {
     path:"/main/stuhome",
     text:"查看成绩",
     icon:"el-icon-document",
     name:"stuhome",
     roll:"1"
  },
   {
     path:"/main/stusubmit",
     text:"提交项目",
     icon:"el-icon-menu",
     name:"stusubmit",
     roll:"1"
  },
   {
     path:"/main/stuproject",
     text:"我的项目",
     icon:"el-icon-setting",
     name:"stuproject",
     roll:"1"
  },
    {
     path:"/main/stumine",
     text:"个人中心",
     icon:"el-icon-setting",
     name:"stumine",
     roll:"1"
  },
  {
     path:"/main/stuvuex",
     text:"vuex",
     icon:"el-icon-edit",
     name:"stuvuex",
     roll:"1"
  },
   {
     path:"/main/teacherhome",
     text:"主页",
     icon:"el-icon-location",
     name:"teacherhome",
     roll:"2"
  },
   {
     path:"/main/teacher/school",
     text:"校区管理",
     icon:"el-icon-edit",
     name:"teacherschool",
     roll:"2"
  },
  {
     path:"/main/teacher/xueke",
     text:"学科管理",
     icon:"el-icon-setting",
     name:"teacherxueke",
     roll:"2"
  },
  
   {
     path:"/main/teacher/banji",
     text:"班级管理",
     icon:"el-icon-share",
     name:"teacherbanji",
     roll:"2"
  },
  {
     path:"/main/teacher/protext",
     text:"项目管理",
     icon:"el-icon-menu",
     name:"teacherprotext",
     roll:"2"
  },
]
export default {
  props:{
    userinfo:{
      type:Object,
      default:{}
    }
  },
  watch:{
    '$route':function(to,from){
      this.active = to.path;   // 控制 push 的高亮 
    }
  },
  data(){
    return {
      navList,
      active:""
    }
  },
  mounted(){
    this.active = this.$route.path;
  }
}
</script>


<style>
.el-menu{
  height:100%;
}
</style>
